<template>
  <el-dialog :visible.sync="dialogFormVisible" :lock-scroll="false" :close-on-click-modal="false" title="用户列表" top="30px" width="800px" @close="closeDialog">
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.realName }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix">
      <el-row class="pagination-container">
        <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import { pagination } from '@/mixins/index'
export default {
  mixins: [pagination],
  data() {
    return {
      dialogFormVisible: false,
      roleId: '',
      list: null,
      listCount: 1,
      listLoading: true
    }
  },
  methods: {
    getData() {
      this.listLoading = true
      this.$http.request({
        url: `/role/user/${this.roleId}/${this.page}/${this.limit}`,

        data: {},
        tokenRefresh: () => this.getData()
      }).then(res => {
        const { list, total } = res.data
        this.list = list
        this.listCount = total
        this.listLoading = false
      })
    },
    closeDialog () {
      this.list = []
    }
  }
}
</script>
<style>
</style>

